<template>
  <div class="container">
    <div class="title">{{ type == 1 ? "体验交易区" : "交易区" }}</div>
    <div class="form">
      <van-search
        class="search"
        v-model="value"
        shape="round"
        background="#F1F1F1"
        clearable
        placeholder="请输入搜索关键词"
        @search="getSearch"
      />
    </div>
    <van-list
      v-model="loading"
      offset="100"
      :finished="finished"
      finished-text="——人家是有底线的——"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
    >
      <van-cell
        data-v-6a7824f2
        v-for="(item, index) in list"
        :key="index"
        @click="navCommodity(item)"
      >
        <div class="conList">
          <img :src="imgUrl + item.list_img" alt="" />
          <div class="conTitle">{{ item.name }}</div>
          <div class="conNumber">{{ item.goods_num }}</div>
          <div class="conButMon">
            <div class="conMouny">￥{{ item.price }}</div>
            <van-button
              type="danger"
              class="but buttonOne"
              v-if="item.kucun != 0"
              >开 抢</van-button
            >
            <van-button type="danger" class="but buttonTwo" v-else
              >售 罄</van-button
            >
          </div>
        </div>
      </van-cell>
    </van-list>
    <div class="botTitle"></div>
  </div>
</template>

<script>
import { getGoodsList, imgUrl, searchGoods } from "../../api/api";
export default {
  name: "experience",
  data() {
    return {
      value: "",
      list: [],
      loading: false,
      finished: false,
      bool: true,
      type: 0,
      total: null,
      page: 1,
      pagesize: 9999,
      imgUrl,
      searchBool: false,
    };
  },
  methods: {
    onSearch(e) {},
    onCancel(e) {},
    onLoad() {
      this.loading = true;
      if (this.total == null)
        return setTimeout(() => {
          this.onLoad();
        }, 1000);
      if (this.list.length >= this.total) {
        this.finished = true;
        this.loading = false;
      } else {
        // this.page = this.page + 1;
        
        this.value != "" ? this.getSearch(this.value) : this.getGood();
        this.loading = false;
        console.log(this.list);
      }
    },
    navCommodity(item) {
      if (item.kucun <= 0) return this.$toast.fail("商品已售罄");
      item = JSON.stringify(item);
      this.$router.push({
        path: "/details",
        query: {
          item,
        },
      });
    },
    getGood() {
      this.searchBool = true;
      let data = {
        type: this.type,
        user_id: localStorage.getItem("userId"),
        begin_date_int: localStorage.getItem("beginDate"),
        end_date_int: localStorage.getItem("endDate"),
        page: this.page,
        pagesize: this.pagesize,
      };
      getGoodsList(data).then((res) => {
        this.$toast.clear()
        console.log("产品列表接口---", res.data);
        this.total = res.data.total;
        // res.data.rows.imgs = res.data.rows.imgs.split(',')
        // res.data.rows.forEach((item) => {
        //   item.imgs = item.imgs.split(",");
        // });
        this.list = this.list.concat(res.data.rows);
      });
    },
    getSearch(value) {
      console.log('------------------', this.searchBool)
      this.searchBool ? "" : (this.list = []);
      this.searchBool = false;
      this.page = 1;
      let data = {
        keyword: value,
        type: this.type,
        user_id: localStorage.getItem("userId"),
        begin_date_int: localStorage.getItem("beginDate"),
        end_date_int: localStorage.getItem("endDate"),
        page: this.page,
        pagesize: this.pagesize,
      };
      searchGoods(data).then((res) => {
        this.$toast.clear()
        console.log("产品搜索列表接口", res);
        this.total = res.data.total;
        // res.data.rows.imgs = res.data.rows.imgs.split(',')
        res.data.rows.forEach((item) => {
          item.imgs = item.imgs.split(",");
        });
        this.list = this.list.concat(res.data.rows);
      });
    },
  },
  mounted() {
    this.type = this.$route.params.type;
    this.getGood();
  },
};
</script>

<style lang="less" scoped>
div {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  letter-spacing: 1px;
}
.container {
  min-height: 100vh;
  background-color: #f1f1f1 !important;

  .title {
    width: 100%;
    height: 50px;
    background-color: #333333;
    color: #fff;
    font-size: 1.2em;
    text-align: center;
    line-height: 50px;
    font-weight: 700;
    letter-spacing: 2px;
  }
  .form {
    width: 100%;
    height: 50px;
    padding: 0 3%;
    margin-top: 10px;
  }
  //   .content {
  .van-list {
    padding-bottom: 80px;
    overflow: hidden;
    position: relative;
    /deep/ .van-cell {
      width: 45%;
      margin-left: 3.3%;
      float: left;
      margin-top: 10px;
      padding-bottom: 10px;
      box-sizing: border-box;
      border-radius: 10px;
      box-shadow: 5px 5px 15px #9fa2a8;
      border: 1px solid#9fa2a8 outset;
    }
    /deep/ .van-list__loading {
      position: absolute;
      bottom: 0;
      left: 50%;
      color: #999999;
      transform: translateX(-50%);
    }
    /deep/ .van-list__finished-text {
      font-size: 0.3em;
      position: fixed;
      bottom: 50px;
      left: 50%;
      z-index: 0;
      transform: translateX(-50%);
    }
    .conList {
      width: 100%;

      img {
        width: 100%;
        height: 170px;
      }
      div {
        padding: 0 5%;
        color: #333333;
      }
      .conTitle {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        letter-spacing: 1px;
        font-size: 1em;
      }
      .conNumber {
        font-size: 0.5em;
        margin-top: 5px;
        color: #999999;
      }
      .conButMon {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: flex-end;
        margin-top: 10px;
        padding: 0 5% 0 0;

        .conMouny {
          color: #ff0000;
          font-size: 1.1em;
        }

        .but {
          width: 60px;
          height: 30px;
          font-size: 0.9em;
          padding: 0;
          margin: 0;
          border: none;
          border-radius: 5px;
          line-height: 30px;
          text-align: center;
        }

        .buttonOne {
          background-color: #dd0000;

          /deep/ .van-button__text {
            color: #fff;
            font-size: 0.8em;
          }
        }

        .buttonTwo {
          background-color: #e5e5e5;
          /deep/ .van-button__text {
            color: #999999;
            font-size: 0.8em;
          }
        }
      }
    }
  }
  .botTitle {
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: #999999;
    font: 0.5em;
  }
}
</style>